<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .nav {
            width: 100%;
            display: flex;
            background-color: #f1f1f1;
            position: fixed;
            bottom: 0;
        }

        .nav div {
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex: 1;
        }

        .active {
            background-color: red;
            color: #fff;
        }
        nav{
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background-color: rgb(71, 71, 249);
            display: flex;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .left .right{
            flex: 1;
       
        }
        .left{
            text-align: left;
        }
        .right{
            text-align: right;
        }
        .center{
            flex: 4;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    class NavBar extends React.Component{

        render(){
            console.log(this.props)
            return (
                <nav>
                    <div className='left'>{this.props.children[0]}</div>
                    <div className='center'>{this.props.children[1]}</div>
                    <div className='right'>{this.props.children[2]}</div>
                </nav>
            )
        }
    }
    class Home extends React.Component {

        render() {
            return (
                <div>
                    <NavBar>
                        <div>#</div>    
                        <div>首页</div> 
                        <div>*</div>
                    </NavBar>    
                </div>
            )
        }
    }
    class Cate extends React.Component {

        render() {
            return   <div>
                    <NavBar>
                        <div>分类</div>    
                        <div></div> 
                        <div>@</div>
                    </NavBar>    
                </div>
        }
    }
    class Cart extends React.Component {

        render() {
            return   <div>
                    <NavBar>
                        <div> ＜ </div>    
                        <div>购物车</div> 
                        <div></div>    
                    </NavBar>    
                </div>
        }
    }
    class Mine extends React.Component {

        render() {
            return   <div>
                    <NavBar>
                        <div> ＜ </div>    
                        <div>我的</div> 
                        <div></div>       
                    </NavBar>    
                </div>
        }
    }
    class App extends React.Component {
        state = {
            // 定义当前选中索引的状态
            activeIndex: 0,
            navList: ["首页", "分类", "购物车", "我的"]
        }
        render() {
            let { activeIndex, navList } = this.state;
            return (
                <div>
                    {activeIndex === 0 && <Home/>}
                    {activeIndex === 1 && <Cate/>}
                    {activeIndex === 2 && <Cart/>}
                    {activeIndex === 3 && <Mine/>}
                    <div className='nav'>
                        {
                            navList.map((item, index) => {
                                return <div key={index} className={activeIndex === index ? 'active' : ''} onClick={() => this.chengeActive(index)}>{item}</div>
                            })
                        }
                    </div>
                </div>
            )
        }
        chengeActive(index) {
            this.setState({
                activeIndex: index
            })
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))

</script>

</html>